Angular 9 - Chartjs - Learn Technologies

Charts are essential components to build a dashboard which often contains performance indicators of the company or that it is used to display a monitoring of the workflow on the cloud for example.

That’s why, in this new tutorial, we’ll see how to build line chart using Chartjs framework.

You can find more details and step by step in this video:

GitHub source code.

Installing ChartJs

After creating new project called charts for example, open new terminal tab in Visual Code and run this command:

npm install chart.js --save

You can follow this link for more details.

Creating new Component

Now let’s create new folder called Views under app folder, in which we add new component called Dashboard by running this command:

ng g c Views/Dashboard

First o all, Inside the typescript file (dashboard.component.ts), we need to import chart object by adding this line:

import * as Chart from 'chart.js'

After that, add 4 properties called cancas, ctx(context) type of any and labels and dataCases type of array of any:

 public canvas: any;
  public ctx: any;
  public labels: any = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
  public dataCases: any = {
    chart1: [2000, 10000, 12000, 14000, 6000, 0, 0, 0, 0, 0, 0, 0],
    chart2: [200, 1000, 1200, 1400, 600, 0, 0, 0, 0, 0, 0, 0]
  };

The labels array will represent the labels on x-axis and dataCases it’s the real data to draw in line chart.

Now, we need to create a new private method called createLineChart. it’ takes 3 parameters: the labels, data and the canvas id defined in Html file.

Create a new object chart in which we define the chart type,(“line” in our case). The “data” object will be the structure of a line to draw, so we specify the chart title, background color….

You can find more details in the official web site link.

 private createLineChart(labels, dataCases, chartId) {
    this.canvas = document.getElementById(chartId);
    this.ctx = this.canvas.getContext('2d');

    let chart = new Chart(this.ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: "Chart 1",
          data: dataCases.chart1,
          backgroundColor: '#ffbb33',
          borderColor: '#ffbb33',
          fill: false,
          borderWidth: 2
        },
        {
          label: "Chart 2",
          data: dataCases.chart2,
          backgroundColor: '#ff4444',
          borderColor: '#ff4444',
          fill: false,
          borderWidth: 2
        }]
      },
      options: {
        title: {
          display: true,
          text: "First chart"
        },
        tooltips: {
          mode: 'index',
          intersect: true
        },
        hover: {
          mode: 'nearest',
          intersect: true
        },
        
      }
    });
  }

Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter or GitHub to be notified when I post new content.

5 1 vote

Article Rating

Learn Technologies